<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-09 09:26:12
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-19 15:07:25
 * @FilePath: \fe_user_pc\src\components\baseModel\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script setup>
import { nextTick, onMounted, reactive, ref, watch, computed } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";

import { Modal } from "ant-design-vue";
// const state = reactive({
//     open:false
// });

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  btnOne: {
    type: Object,
    default: () => {
      return {
        type: "primary",
        text: "取消",
        show: true,
      };
    },
  },

  btnTow: {
    type: Object,
    default: () => {
      return {
        type: "primary",
        text: "确定",
        show: true,
      };
    },
  },
  content: {
    type: String,
    default: "确定删除该任务吗?",
  },
  // 是否可以点击遮罩层关闭弹窗
  maskClosable: {
    type: Boolean,
    default: true,
  },
  contentWidth: {
    default: 520,
  },
  zIndex: {
    type: Number,
    default: 1000,
  },
  minWidth: {
    type: String,
    default: "auto",
  },
  // 是否居中
  centered: {
    type: Boolean,
    default: false,
  },
  destroyOnClose: {
    type: Boolean,
    default: false,
  },
  // 是否展示关闭按钮
  closable: {
    type: Boolean,
    default: true,
  },
  // 是否可以esc关闭
  keyboard: {
    type: Boolean,
    default: false,
  }
});

const data = ref({});
const visible = ref(false);
const someModal = ref(null);
const emit = defineEmits(["submit", "cancel", "isClose", "isVisible"]);

const handleOk = () => {
  emit("submit", data.value);
  // visible.value = false;
};
const handleCancel = () => {
  // visible.value = false;
  emit("cancel");
};

// 打开弹窗
const showModal = (params) => {
  // document.querySelector(".ss-modal-body").paddingTop = "0px";
  visible.value = true;
  data.value = params;
};

const closeModal = () => {
  visible.value = false;
};

// 获取当前弹窗的状态
const visibleState = computed(() => {
  return visible.value;
});

defineExpose({
  showModal,
  closeModal,
  visibleState,
});

onMounted(() => {
  //     nextTick(() => {
  //       someModal.value.getContainer = () => document.getElementById('app');
  // });
});

watch(
  () => visible.value,
  (nv, ov) => {
    if (nv == false) {
      emit("isClose");
    } else {
      emit("isVisible", nv);
    }
  }
);
</script>
<template>
  <a-config-provider prefix-cls="ss">
    <div class="baseModel">
      <a-modal :style="{ border: 'none', 'min-width': props.minWidth }" v-model:visible="visible"
        :getContainer="'.baseModel'" :maskClosable="props.maskClosable" :width="props.contentWidth"
        :zIndex="props.zIndex" :destroyOnClose="props.destroyOnClose" :centered="props.centered"
        :closable="props.closable" :keyboard="props.keyboard">
        <template #title>
          <slot name="title">
            <template v-if="props.title">
              <span>{{ props.title }}</span></template>
            <template v-else>
              <ExclamationCircleOutlined style="color: darkorange" />
              提示
            </template>
          </slot>
        </template>
        <slot name="content">
          <p>{{ props.content }}</p>
        </slot>
        <template #footer>
          <slot name="footer">
            <a-button key="back" @click="handleCancel">{{
              props.btnOne.text
            }}</a-button>
            <a-button key="submit" type="primary" :loading="loading" @click="handleOk">{{ props.btnTow.text
              }}</a-button>
          </slot>
        </template>
      </a-modal>
    </div>
  </a-config-provider>
</template>

<style lang="less" scoped>
// 去除边框线
:deep(.ss-modal-header) {
  border-bottom: none !important;
}
:deep(.ss-modal-body) {
  padding-top: 0;
  // padding-bottom: 0;
}

:deep(.ss-modal-footer) {
  border-top: none !important;
  padding: 10px 16px 22px 16px;
}

// 设置弹窗圆角
.baseModel {
  :deep(.ss-modal-content) {
    border-radius: 10px;
    overflow: hidden;
  }
}
</style>
